<!--
 * @Author: Damon Liu
 * @Date: 2025-04-29 16:17:04
 * @LastEditors: Damon Liu
 * @LastEditTime: 2025-04-30 17:34:02
 * @Description: 
-->
<template>
    <div class="schedule-container">
        <div>
            <div class="schedule-header">
                <div class="week-info">
                    <a-button-group>
                        <a-button @click="prevWeek">
                            <template #icon>
                                <LeftOutlined />
                            </template>
                        </a-button>
                        <a-button @click="nextWeek">
                            <template #icon>
                                <RightOutlined />
                            </template>
                        </a-button>
                    </a-button-group>
                    <span class="week-range">{{ weekRange }}</span>
                    <span class="schedule-count">本周共有 {{ weekInfo.count }} 个日程</span>

                    <div style="width: 0; flex: 1; display: flex;">
                        <div v-for="(eventType, index) in EVENT_TYPES" :key="index" style="display: flex; align-items: center;">
                            <div class="color-block" :style="{ backgroundColor: eventType.color  }">

                            </div>
                            <span style="margin: 0 4px;">:</span>
                            <a-tag :color="eventType.color">{{ eventType.text }}</a-tag>
                        </div>
                    </div>
                </div>
                <div class="view-switch">
                    <a-radio-group v-model:value="viewMode" button-style="solid">
                        <a-radio-button value="calendar">日历视图</a-radio-button>
                        <a-radio-button value="list">列表视图</a-radio-button>
                    </a-radio-group>
                </div>
            </div>
            <div class="schedule-content">
                <calendar v-if="viewMode === 'calendar'" :schedule-list="weekSchedules" ref="calendarRef"
                    @dateSet="handleDateSet" />
                <schedule-list v-else :schedule-list="weekSchedules" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { message } from 'ant-design-vue'
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import Calendar from './components/calendar.vue'
import ScheduleList from './components/scheduleList.vue'
import { EVENT_TYPES } from '~/utils/enums'


const calendarRef = ref()

//dayjs.locale('zh-cn')

// 对齐至周一
const alignToMonday = (date) => {
    const now = dayjs(date)
    const day = now.day() // 0=周日, 1=周一, ..., 6=周六
    const diffToMonday = day === 0 ? -6 : 1 - day // 计算到周一的天数差
    return now.add(diffToMonday, 'day').format('YYYY-MM-DD 00:00:00')
}

const viewMode = ref('calendar')
const weekStart = ref(alignToMonday(dayjs()))
const weekSchedules = ref([])
const weekInfo = ref({})


const weekRange = computed(() => {
    const start = dayjs(weekInfo.value.start)
    const end = dayjs(weekInfo.value.end)
    return `${start.format('YYYY年MM月DD日')} - ${end.format('YYYY年MM月DD日')}`
})

const fetchWeekSchedules = async () => {
    try {
        console.log(weekStart.value)
        const response = await window.ipcRenderer.getWeekSchedules(weekStart.value)
        weekSchedules.value = response.schedules
        weekInfo.value = response.weekInfo
        if (viewMode.value === 'calendar') {
            nextTick(() => {
                calendarRef.value?.updateEvents()
            })
        }
    } catch (error) {
        console.error(error)
        message.error('获取日程失败')
    }
}

const prevWeek = () => {
    weekStart.value = alignToMonday(dayjs(weekStart.value).subtract(7, 'day'))
    if (viewMode.value === 'calendar') {
        calendarRef.value?.setCalendarRange(weekStart.value, null)
    }
    else {
        fetchWeekSchedules()
    }
}

const nextWeek = () => {
    weekStart.value = alignToMonday(dayjs(weekStart.value).add(7, 'day'))
    if (viewMode.value === 'calendar') {
        calendarRef.value?.setCalendarRange(weekStart.value, null)
    }
    else {
        fetchWeekSchedules()
    }
}

const handleDateSet = (info) => {
    weekStart.value = alignToMonday(dayjs(info.startStr));
    console.log('weekStart', weekStart.value)
    console.log('info', info)
    fetchWeekSchedules()
}

onMounted(() => {
    fetchWeekSchedules()
    window.ipcRenderer.on('schedule-updated', fetchWeekSchedules)
})
</script>

<style scoped>
.schedule-container {
    padding: 0px 12px;
    height: 100%;
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.week-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.week-range {
    font-size: 16px;
    font-weight: bold;
}

.schedule-count {
    color: #666;
}


.color-block {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}
</style>